<template>
	<view>
		<!-- 左侧导航栏 -->
		<view class="flex align-center shadow" style="height: 100rpx;">
			<view class="w-100">
				<uni-search-bar readonly clearButton="always" cancelButton="none" placeholder="搜索您想要的商品"></uni-search-bar>
			</view>
		</view>
		<view class="flex" :style="'height:calc(100vh - 100rpx - 55px)'">
			<scroll-view scroll-y style="width: 25%; height: 100%; background-color: rgb(248, 248, 248);" show-scrollbar="false">
				<view @click="handleClassify(index)" v-for="(item, index) in tableData" :key="index" class="font" style="width: 100%; height: 100rpx;" :class="{ active: index == currentId }">
					<view class="flex justify-center align-center w-100" style=" height: 100%;" :class="currentId==index?'action':'unaction'">
						{{ item.Classify_Name }}
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y style="width: 75%; height: 100%;" show-scrollbar="false">
				<view class="mx-2 py-2 " v-for="(item,index) in tableData[currentId].Children" :key="index">
					<view @click="handle(item)" class="flex align-center">
						<text class="font font-weight-bold">{{item.Classify_Name}}</text>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
					<view class="flex flex-wrap">
						<view @click="handle(i)" class="mt-2 flex flex-column align-center justify-center" style="width: 33%;" v-for="(i,id) in item.Children" :key="id">
							<image v-if="BASE_IMG" style="width: 120rpx; height: 120rpx;" class="rounded-lg shadow" :src="i.Picture_URL?BASE_IMG+i.Picture_URL:'/static/icon/leibie.png'"></image>
							<text class="font-sm mt-2 font-weight-bold">{{i.Classify_Name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<tabbar :tabId="1"></tabbar>
	</view>
</template>
<script>
	const app = getApp();
	import { mapState,mapMutations } from 'vuex';
	import { getClassifyList } from '@/api/article.js'
	import { ShopCartQuantity } from "./js/ShopCartQuantity.js";
	export default {
		mixins:[ShopCartQuantity],
		data() {
			return {
				currentId: 0, //1级分类索引
				form: {
					ShopColumn_Id: "",
					Category_SerialNumber: "",
					page: 1,
					limit: 10,
				},
				total: 0, //条数
				tableData: [], //类目
				loading: false,
			};
		},
		onLoad() {
			this.getData();
		},
		computed:{
			...mapState(['Open_ID','App_ID','BASE_IMG']),
		},
		methods: {
			...mapMutations(['modifyShopNum']),
			async getData(){
				let data = await getClassifyList();
				if(data){
					this.tableData = data;
				}
			},
			handleClassify(index){
				this.currentId = index;
			},
			handle(item){
				uni.navigateTo({
					url:'/pages/index/searchGoods?Classify_SerialNumber='+item.Classify_SerialNumber
				})
			}
		},
	};
</script>
<style lang='scss'>
	.action{
		border-left:5rpx solid #dc3545; 
		border-right:5rpx solid #fff;
		background-color: #fff;
		box-sizing: border-box;
	}
	.unaction{
		border-left:5rpx solid rgb(248, 248, 248);
		border-right:5rpx solid rgb(248, 248, 248);
		box-sizing: border-box;
	}
</style>